<template>
  <div>
    <el-card class="top-card">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div>
            <i class="el-icon-info"></i>
            <span>共99条数据</span>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="warning" size="small">警告按钮</el-button>
          <el-button type="danger" size="small">危险按钮</el-button>
          <el-button type="primary" size="small">主要按钮</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="bottom-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column fixed prop="date" label="日期" width="200">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="部门" width="100">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="200">
        </el-table-column>

        <el-table-column prop="city" label="市区" width="100">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="200">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClick(scope.row)" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'employees',

  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }
      ]
    }
  },

  methods: {
    handleClick (row) {
      console.log(row)
    }
  }
}
</script>

<style></style>
